<template>
  <div id="Content-page">
    <PagingComponent :pagData="pagData" />
    <div class="content-main row">
      <div class="global-display subbuttom">
        <el-button type="success" class="subbuttom" @click="juMp">上传推荐</el-button>
      </div>
      <div v-if="dailyRecomData.length === 0" class="empty">
        <el-empty description="暂无数据" />
      </div>

      <div
        class="uoload-recom global-display global-a-items col-sm-12 col-md-6 col-xl-6 col-xxl-12"
        v-for="(item, index) in dailyRecomData"
        :key="item._id || index"
      >
        <div class="cover">
          <img :src="item.imageUrl" alt="cover" />
        </div>
        <div class="meta">
          <p class="text-show">{{ item.title }}</p>
          <p>地址：{{ item.address }}</p>
          <p :style="{ color: item.color }">颜色值：{{ item.color }}</p>
          <p>添加时间：{{ item.time }}</p>
        </div>
        <div class="ops">
          <el-button type="danger" size="default" @click="deleteRecom(item._id)">删除</el-button>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pager-next" v-if="dailyRecomData.length > 0">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="count"
          :current-page="page"
          @current-change="currentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import PagingComponent from '@/page/components/Paging-component.vue'
import { ref, onMounted } from 'vue'
import type { PagingData } from '@/type/global'
import { useRouter } from 'vue-router'
import { getDailyRecomAPI, deleteDailyRecomAPI } from '@/api/daily-recom'

const router = useRouter()

// 面包屑
const pagData = ref<PagingData[]>([{ name: '每日推荐', router: '/daily-recom' }])

// 列表数据类型
interface DailyRecomItem {
  _id: string
  imageUrl: string
  title: string
  address: string
  color: string
  time: string
  setting?: boolean
}

const dailyRecomData = ref<DailyRecomItem[]>([])
const count = ref(0)
const page = ref(1)

function juMp() {
  router.push('/daily-recom-upload')
}

onMounted(async () => {
  await getDailyRecomData()
})

async function getDailyRecomData(p: number = 1) {
  try {
    page.value = p
    const res = await getDailyRecomAPI(p)
    dailyRecomData.value = res.data.data
    count.value = res.data.count
  } catch (error) {
    ElMessage.error((error as Error).message || '获取每日推荐失败')
  }
}

async function currentChange(p: number) {
  await getDailyRecomData(p)
}

// 删除
async function deleteRecom(_id: string) {
  try {
    await ElMessageBox.confirm('确定删除吗', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    })
    const res = await deleteDailyRecomAPI(_id)
    if (res.msg !== 'SUCCESS') {
      ElMessage.error(res.msg)
      return
    }
    ElMessage.success(res.data.message)
    await getDailyRecomData()
  } catch (error) {
    ElMessage.error((error as Error).message || '删除失败')
  }
}
</script>

<style scoped>
#Content-page {
  padding: 8px 10px 16px;
}

.content-main {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 8px;
  box-shadow: var(--shadow);
}

.global-display {
  display: flex;
  align-items: center;
}

.global-a-items {
  justify-content: space-between;
}

.subbuttom {
  justify-content: flex-end;
}

.uoload-recom {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin: 14px 0;
  gap: 16px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.uoload-recom:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(52, 179, 227, 0.45);
}

.cover {
  position: relative;
}
.cover img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
}

.meta {
  flex: 1;
  color: var(--text);
}
.text-show {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 6px;
}
.meta p {
  margin: 2px 0;
  color: var(--muted);
}

/* 颜色预览小块 */
.meta p:nth-child(3) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.meta p:nth-child(3)::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: currentColor;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

.ops {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pager-next {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

@media (max-width: 1200px) {
  .uoload-recom {
    flex-direction: column;
    align-items: stretch;
  }

  .global-a-items {
    justify-content: flex-start;
  }

  .cover {
    display: flex;
    justify-content: center;
  }

  .cover img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
  }

  .meta {
    margin-top: 8px;
  }

  .ops {
    justify-content: flex-end;
    margin-top: 8px;
  }
}

@media (max-width: 768px) {
  .uoload-recom {
    flex-direction: column;
    align-items: stretch;
  }

  .global-a-items {
    justify-content: flex-start;
  }

  .cover {
    display: flex;
    justify-content: center;
  }

  .cover img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
  }

  .meta {
    margin-top: 8px;
  }

  .ops {
    justify-content: flex-end;
    margin-top: 8px;
  }
}
</style>
